<template>
    <div class="home-container">
        <el-menu :default-active="activeIndex" class="el-menu-demo" @select="handleSelect">
            <el-menu-item v-for="item in menuList" :key="item.name" :index="item.name">
                {{ item.label }}
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const activeIndex = ref("");

const menuList = [
    {
        label: "翻译",
        name: "translate",
    },
    {
        label: "截屏",
        name: "screenShot",
    },
    {
        label: "设置",
        name: "setting",
    },
];

const handleSelect = (index: string) => {
    activeIndex.value = index;
    router.push({ name: index });
};
</script>

<style scoped>
.home-container {
    height: 100%;
    padding: 20px;
    border-radius: 20px;
    overflow: hidden;
}
</style>